<template>
  <div>
    <div class="block" style="background-color: black">
      <el-carousel height="500px" :interval="4000">
        <el-carousel-item v-for="item in 4" :key="item">
          <img width="1250px" height="500px" src="@/assets/home1.jpg" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="id">
              <div class="h">
        <p style="float:center;margin-left:80px;font-size: 25px;color:#333333;;">
          热门课程
        </p>
      </div>
         <div class="course">
        <div class="courseintro" v-for="item in list" :key="item.id">
          <div class="test" style="overflow: hidden">
            <router-link :to="'/course/'+item.id"
              ><img
                style="height: 200px; width: 300px; transition: all 0.6s"
                :src="item.cover"
                alt=""
              />
              <p
                class="p"
                style="
                  position: absolute;
                  margin-top: -110px;
                  margin-left: 80px;
                "
              >
                &nbsp;&nbsp;&nbsp;点击学习&nbsp;&nbsp;&nbsp;
              </p></router-link
              >
          </div>
          <p
            style="
              color: #333333;
              font-size: 18px;
              margin-right: 180px;
              margin-top: 1px;
              float: left;
            "
          >
            <a class="coursea" href="">{{ item.title }}</a>
          </p> 
          <div style="clear: both;margin-top: 1px;float: left;font-size:11px;color: #999999;">{{item.viewCount}}人学习</div>
          <div style="clear: both;margin-top: -18px;float: right;background-color:#14BA4c;color:#FFFFFF;font-size:13px">&nbsp;&nbsp;免费&nbsp;&nbsp;</div>
        </div>
      </div>
    <div style="clear: both;">
        <router-link to="course"><div style=" border: 1px solid #68CB9B;color: #68CB9B;font-size:20px;border-radius:20px;margin-left:575px;height: 40px;width: 180px;"><div>&nbsp;</div><div style="margin-top:-15px">全部课程</div></div></router-link>
    </div>
     <div class="h">
        <p style="float:center;margin-left:80px;font-size: 25px;color:#333333;;">
          名师大咖
        </p>
      </div>
    </div>
    <div class="tar" style="margin-left:-12px">
      <el-row>
        <el-col :span="4" v-for="item in tlist" :key="item.id" :offset="1">
          <el-card
            class="cart"
            style="
              width: 300px;
              height: 330px;
              margin-top: 20px;
              margin-left: 80px;
              margin-bttom: 20px;
              margin-bottom: 20px;
            "
          >
            <div slot="header">
              
              <img
                :src="item.avatar"
                style="border-radius: 50%; height: 120px; width: 120px"
              />
              <div style="color: #666666; margin-top: 5px">
                <router-link :to="'/id/'+item.id" style="font-size: 18px">{{ item.name }}</router-link>
              </div>
              <div style="color: #999999; margin-top: 8px">高级总监</div>
            </div>
            <div style="color: #999999">
              <p style="font-size: 12px; font-family: SimSun;overflow: hidden;">
                {{item.intro}}
              </p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div style="clear: both;">
        <router-link to="/teacher"><div style=" margin-bottom:60px;margin-top:10px;border: 1px solid #68CB9B;color: #68CB9B;font-size:20px;border-radius:20px;margin-left:675px;height: 40px;width: 180px;"><div>&nbsp;</div><div style="margin-top:-15px">全部讲师</div></div></router-link>
    </div>
  </div>
</template>
<script>
import CourseApi from "@/api/course";
import SubjectApi from "@/api/subject";
import TeacherApi from "@/api/teacher";
export default {
  data() {
    return {
       id: "",
      list: {},
      onetitle: {},
      twotitle: {},
      course: {},
       total: 10,
      tlist: {},
      page: 1,
      size: 8,
    };
  },
   created() {
    this.getCourse();
    this.fecthData();
  },
  methods: {
     fecthData() {
      TeacherApi.getTopTeacher().then((res) => {
        this.tlist = res.data.items;
        
      })},
    getCourse() {
      CourseApi.getTopCourse().then((res) => {
        this.list = res.data.items;
      });
    },
  },
};
</script>
<style scoped>
.tar .cart:hover { 
  box-shadow: 8px 8px 8px #ccc;
}
.tar a {
  color: #666666;
  transition: 0.5 s;
  text-decoration: none;
}
.tar a:hover {
  color: #68cb9b;
  text-decoration: underline #68cb9b;
}
.tar img:hover {
  filter: brightness(50%);
  transform: scale(1.2);
  opacity: 1;
}
p{
  clear: both;
  
}
.footer{
  position:relative;
  background-color: red;
}
.allcourse {
  margin-top: 20px;
  float: left;
  margin-left: 30px;
  font-size: 14px;
}
a {
  color: #666666;
  text-decoration: none #666666;
}
.router-link-active {
  color: red;
  text-decoration: none #666666;
}
.allcourse:hover {
  color: #ea562e;
  text-decoration: none #ea562e;
}
.children {
  margin-left: 90px;
  
}
.sort3 {
  height: 40px;
  border-bottom: solid #dcdcdc 1px;
  overflow: hidden;
}
.sort3 .children3 {
  float: left;
  margin-left: 12px;
  margin-top: 10px;
}
.sort3 .children3 a {
  font-size: 14px;
  margin-left: 50px;
}
.sort3 .children3 .router-link-active {
  color: green;
  text-decoration: none #666666;
}
.sort2 {
  height: 120px;
  border-bottom: solid #dcdcdc 1px;
  overflow: hidden;
}
.sort1 {
  height: 60px;
  border-bottom: solid #dcdcdc 1px;
}
.sort {
  margin-top: -20px;
  width: 1246px;
}
.test:hover .p {
  opacity: 1;
}
.test:hover a img {
  filter: brightness(50%);
  transform: scale(1.2);
  opacity: 1;
}
.p {
  opacity: 0;
  font-size: 25px;
  border-radius: 15px;
  border: 1px solid white;
  color: white;
}
.test img:hover {
  filter: brightness(50%);
  transform: scale(1.2);
  opacity: 1;
}
.coursea:hover {
  color: black;
  text-decoration: underline black;
}
.courseintro {
  float: left;
  margin-right: 25px;
  margin-bottom: 50px;
}
.course {
  margin-left: 27px;
  width: 1400px;
}
.id {
  width: 1300px;
  margin-left: 100px;
}
.h {
  width: 1245px;
  height: 40px;
  margin-top: 20px;
  margin-bottom: 20px;
  
}
.intro {
  height: 340px;
  width: 1000px;

  margin-top: 20px;
}
.avatar {
  height: 288px;
  width: 288px;
  background-color: white;
  margin-left: 20px;
  box-shadow: 8px 8px 8px #ccc;
}
.mess {
  position: absolute;
  margin-top: -287px;
  margin-left: 330px;
  height: 288px;
  width: 800px;
}
.level {
  position: absolute;
  margin-top: 40px;
  height: 39.2px;
  width: 128px;
  background-color: #ededed;
}
.content {
  position: absolute;
  margin-top: 80px;
  height: 210px;
  width: 800px;
  overflow: hidden;
}
</style>
